<template>
    <NuxtLayout name="default">
        <template #tools>
            <!-- <Tools :active="toolsVal" @change="toolsChange" /> -->
            <div class="header">
                <div :class="selectedOption === item.value
                            ? 'selectedOption common'
                            : 'notSelectedOption common'
                        " v-for="item in options" :key="item.value" @click="select(item.value)">
                    <img class="w-[16px] h-[14px] mr-[4px]" :src="item.icon" />
                    <div class="labelText flex">
                        {{ item.label
                        }}<span class="text-[8px]" style="line-height: 8px" v-if="item?.tips">{{ item.tips }}</span>
                    </div>
                </div>
            </div>
        </template>
        <template #panel> </template>
        <div class="page h-full w-full">
            <el-scrollbar>
                <div class="content">
                    <template v-if="selectedOption === 'plaza'">
                        <plaza @select="select"></plaza>
                    </template>
                    <template v-if="selectedOption === 'MJ'">
                        <MJ :promptProp="promptProp"></MJ>
                    </template>
                    <template v-if="selectedOption === 'SDbase'">
                        <SDbase></SDbase>
                    </template>
                    <template v-if="selectedOption === 'SDprofession'">
                        <SDprofession></SDprofession>
                    </template>
                </div>
            </el-scrollbar>
        </div>
    </NuxtLayout>
</template>

<script setup lang="ts">
import plaza from './plaza/index.vue'
import MJ from './MJ/index.vue'
import SDbase from './SDbase/index.vue'
import SDprofession from './SDprofession/index.vue'
import { ref } from 'vue'
import IconPlaza from 'assets/images/icon_plaza.png'
import IconMJ from 'assets/images/icon_mj.png'
import IconSDBase from 'assets/images/icon_SD_base.png'
import IconPlazaSelected from 'assets/images/icon_plaza_selected.png'
import IconMJSelected from 'assets/images/icon_mj_selected.png'
import IconSDBaseSelected from 'assets/images/icon_SD_base_selected.png'
//import { useIndexEffect } from '../qrcode/hooks/useIndexEffect'
const route = useRoute()
const promptProp = ref('')
const options = [
    {
        label: '广场',
        value: 'plaza',
        icon: IconPlaza,
        selectedIcon: IconPlazaSelected
    },
    { label: 'MJ', value: 'MJ', icon: IconMJ, selectedIcon: IconMJSelected },
    {
        label: 'SD(基础版)',
        value: 'SDbase',
        icon: IconSDBase,
        selectedIcon: IconSDBaseSelected
    },
    {
        label: 'SD(教学版)',
        value: 'SDprofession',
        icon: IconSDBase,
        selectedIcon: IconSDBaseSelected
    }
]
const selectedOption = ref('plaza')
const select = (value: string, prompt?: any) => {
    if (prompt) {
        promptProp.value = prompt
    } else {
        promptProp.value = ''
    }
    selectedOption.value = value
}
if (route.query.page) {
    selectedOption.value = route.query.page
    promptProp.value = ''
}
//const { taskLists, taskIndex, isReceiving, setTaskRecordFunc } = useIndexEffect()
</script>
<style lang="scss" scoped>
.page {
    width: 100%;
    background: hsl(230, 14%, 8%);
    border-radius: 0px 0px 0px 0px;
    //min-width: 1000px;
}

.header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    //width: 491px;
    height: 64px;
    border-radius: 0px 0px 0px 0px;

    .common {
        <<<<<<< HEAD padding: 5px 15px;
        //width: 88px;
        //height: 32px;
        =======padding: 8px 14px;
        >>>>>>>a61a7922c0ffbb815f0518df36c7235d7b55b5ef color: #fff;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 28px;

        .labelText {
            line-height: 16px;
            //width: 28px;
            //height: 20px;

            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            <<<<<<< HEAD font-size: 15px;
            =======font-size: 16px;
            >>>>>>>a61a7922c0ffbb815f0518df36c7235d7b55b5ef color: #ffffff;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }
}

.selectedOption {
    font-size: 12px;
    border-radius: 20px;
    border: 1px solid #f86e07;
    text-align: center;
    background: #262932;
}

.notSelectedOption {
    font-size: 12px;
    border-radius: 20px;
    border: 1px solid transparent;
    text-align: center;
    cursor: pointer;
}

.content {
    display: flex;
    width: 100%;
    min-width: 0;
}
</style>
